<template>
  <div class="item-wrap">
    <span class="line"></span>
    <el-icon
      :size="20"
      :color="'#ff5050'"
      v-if="!hiddenDelete"
      class="icon"
      @click="$emit('remove')"
      ><Remove
    /></el-icon>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { Remove } from '@element-plus/icons-vue'

defineProps({
  hiddenDelete: Boolean
})
</script>

<style lang="scss" scoped>
.item-wrap {
  display: flex;
  min-height: var(--line-height);

  .line {
    flex-shrink: 0;
    position: relative;
    margin-top: calc(var(--line-height) / 2 - var(--border-width) / 2);
    width: 20px;
    height: var(--border-width);
    margin-right: 5px;
    background-color: #ededed;
  }

  .icon {
    margin-right: 5px;
    margin-top: 7px;
    cursor: pointer;
    opacity: 0.9;
  }
}
</style>
